<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>新增仓库</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/icon.css" />
		<style>
			.w36 {width: 50% !important;}
			.upBtn{opacity: 1;position: relative;top:-80px}
			.img-div{         /*创建包裹图片的div的样式*/
				border: 1px solid #ddd;
				float: left;
				line-height: 1;
				margin-left: 5px;
				overflow: hidden;
				position: relative;
			}
			.mui-type{width: 30px; height: 35px;top: 6px; left: 6px; background: url(../../images/bizimg/type.png) no-repeat center; position: absolute;background-size: 100%}
			.my-jm{width: 30px; height: 35px;top: 6px; left: 6px; background: url(../../images/bizimg/measure.png) no-repeat center; position: absolute;background-size: 100%}
			.hide{display: none}
			.show{display: block}
		</style>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新增仓库</h1>
		</header>
		<div class="mui-content">
			<div  class="mui-control-content mui-active">
				<form class="mui-input-group">
					
					<div class="mui-input-row h50 pr">
						<i class="mui-icon-cang mui-jm   mui-pull-left"></i>
						<label class="pl40">联系人</label>
						<input  style="width: 50%; text-align: right"  type="text" maxlength="10" class="mt5 mui-input mui-yuuye" placeholder="请输入联系人">
					<!--<a class="mui-navigate-right"></a>-->
					</div>
					<div class="mui-input-row h50 pr">
						<i class="mui-icon-cang kf-jm mui-pull-left"></i>
						<label class="pl40">联系电话</label>
						<input style="width: 50%; text-align: right" type="text" pattern="[0-9]*" maxlength="11" class="mt5 mui-input mui-yuuye" placeholder="请输入联系电话">
					<!--<a class="mui-navigate-right"></a>-->
					</div>
					<div class="mui-input-row h50 pr">
						<i class="mui-jszl-icon mui-city-icon  mui-pull-left"></i>
						<label class="pl40">选择城市</label>
						<!--<input style="width: 50%"  onfocus="this.blur();" id="choseCity" type="text" class="mt5 mui-input mui-yuuye" placeholder="请选择">-->
						<!--<input id="value1" type="hidden" value="20,234,504"/>-->
						<div style="width: 4rem;float: left;margin-left: 2rem">
							<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
								<option value="item-1">选择省</option>
								<option value="item-2">河北</option>
								<option value="item-3">吉林</option>
								<option value="item-4">湖北</option>
								<option value="item-5">北京</option>
							</select>
						</div>
						<div style="width:4rem;float: left;">
							<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
								<option value="item-1">选择市</option>
								<option value="item-2">廊坊</option>
								<option value="item-3">石家庄</option>
								<option value="item-4">保定</option>
								<option value="item-5">邯郸</option>
							</select>
						</div>
						<div style="width: 4rem;float: left;">
							<select style="width: 100%;text-align: center;padding: 0;border: none" class="mui-btn mui-btn-block mt5">
								<option value="item-1">选择区</option>
								<option value="item-2">区一</option>
								<option value="item-3">区一</option>
								<option value="item-4">区一</option>
								<option value="item-5">区一</option>
							</select>
						</div>
					</div>
					<div class="mui-input-row h50 pr">
						<i class="mui-icon-cang mui-wz   mui-pull-left"></i>
						<label class="pl40">位置</label>
						<input style="width: 50%; text-align: right" maxlength="10" type="text" class="mt5 mui-input mui-yuuye" placeholder="请输入固定电话">
					</div>
					<div class="mui-input-row h50 pr">
						<i class="mui-type mui-pull-left"></i>
						<label class="pl40">仓储类别</label>
						<select style="width: 60%" class="mui-btn mui-btn-block w36 mt5">
							<option value="item-1">请选择仓储类别</option>
							<option value="item-2">item-2</option>
							<option value="item-3">item-3</option>
							<option value="item-4">item-4</option>
							<option value="item-5">item-5</option>
						</select>
					<a class="mui-navigate-right"></a>	
					</div>
					<div class="mui-input-row h50 pr">
						<i class="mui-icon-cang mui-cangchutype mui-pull-left"></i>
						<label class="pl40">仓库名字</label>
						<input style="width: 50%; text-align: right" maxlength="10"  type="text" class="mt5 mui-input mui-yuuye" placeholder="请输入仓库名字">
					</div>
					<div class="mui-input-row h50 pr">
						<i class="mui-icon-cang mui-jg   mui-pull-left"></i>
						<label class="pl40">价格</label>
						<input style="width: 50%; text-align: right" maxlength="10"  type="text" class="mt5 mui-input mui-yuuye" placeholder="请输入仓库租赁价格">
					</div>
					<div class="mui-input-row h50 pr">
						<i class="my-jm mui-pull-left"></i>
						<label class="pl40">面积</label>
						<input style="width:33%; text-align: right;float: left;margin-left: 2.2rem" maxlength="10"  type="text" class="mt5 mui-input mui-yuuye" placeholder="请输入租用长">
						<input style="width: 33%; text-align: right;float: left" maxlength="10"  type="text" class="mt5 mui-input mui-yuuye" placeholder="请输入租用宽">
					</div>
					<div class="mui-input-row h50 pr">
						<i class="mui-type mui-ckjg   mui-pull-left"></i>
						<label class="pl40">建筑物类别</label>
						<select style="width: 50%" class="mui-btn mui-btn-block w36 mt5">
							<option value="item-1">请选择仓储类别</option>
							<option value="item-2">item-2</option>
							<option value="item-3">item-3</option>
							<option value="item-4">item-4</option>
							<option value="item-5">item-5</option>
						</select>
					<a class="mui-navigate-right"></a>
					</div>
					<div class="mui-input-row h50 pr">
						<i class="mui-icon-cang mui-ckcont   mui-pull-left"></i>
						<label class="pl40">仓库描述</label>
						<input style="width: 50%; text-align: right" type="text" class="mt5 mui-input mui-yuuye" placeholder="请输入仓库描述">
					</div>
					<div class="mui-input-row  pr " style="height: auto;">
						<div class="mui-img">
							<i class="mui-icon-cang mui-ckimg   mui-pull-left"></i>
							<label class="pl40 mt5">仓库图片</label>
							<span class="imgspan" >(添加图片最多9张)</span>
						</div>

						<div class="img-box" id="imgboxid"></div>
						<div style="position: relative;width: 110px;height: 110px;float: left" id="btnBox">
							<input id="inputFile" style="position: absolute;width: 110px;height: 110px;opacity: 0;top:0;left: 0" type="file"  multiple="multiple"  name="fileAttach[]" onchange="xmTanUploadImg(this)"/>
							<img id="imgBtn" style="width: 110px;height: 110px;" src="../../images/iconfont-tianjia.png"/>
						</div>

					</div>
					<div class="mui-input-row  pr " style="height: auto;">
						<div class="mui-img">
							<i class="mui-icon-cang mui-xkzimg mui-pull-left"></i>
							<label class="pl40 mt5">房产证/企业许可证</label>
						</div>

						<div class="imgWrap" style="width: 110px;height: 110px;position: relative">
							<div class="img-box" id="imgboxidf"></div>
							<img id="imgBtnf" style="width: 110px;height: 110px;top:0;left: 0;" src="../../images/iconfont-tianjia.png"/>
							<input style="position: absolute;width: 110px;height: 110px;top:0;left: 0;z-index: 100;opacity: 0" type="file"  multiple="multiple"  name="fileAttach[]" onchange="xmTanUploadImgf(this)"/>
						</div>

					</div>
					<div class="mui-input-row  pr " style="height: auto;">
						<div class="mui-img">
							<i class="mui-icon-cang mui-ckpmimg mui-pull-left"></i>
							<label class="pl40 mt5">仓库平台图</label>
						</div>

						<div class="imgWrap" style="width: 110px;height: 110px;position: relative">
							<div class="img-box" id="imgboxidc"></div>
							<img id="imgBtnc" style="width: 110px;height: 110px;top:0;left: 0;" src="../../images/iconfont-tianjia.png"/>
							<input style="position: absolute;width: 110px;height: 110px;top:0;left: 0;z-index: 100;opacity: 0" type="file"  multiple="multiple"  name="fileAttach[]" onchange="xmTanUploadImgc(this)"/>
						</div>
					</div>
				</form>
			</div>
			<button type="button" class="mb20 mui-btn-sz ">保存</button>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script>
//		$(function(){
            //选择图片，马上预览,仓库图片
			var imgSrc = [];   //定义存储图片src的地址

            function xmTanUploadImg(obj) {
                var fl=obj.files.length;
                for(var i=0;i<fl;i++){
                    var file=obj.files[i];
                    var reader = new FileReader();

                    //读取文件过程方法

                    reader.onloadstart = function (e) {
                        console.log("开始读取....");
                    }
                    reader.onprogress = function (e) {
                        console.log("正在读取中....");
                    }
                    reader.onabort = function (e) {
                        console.log("中断读取....");
                    }
                    reader.onerror = function (e) {
                        console.log("读取异常....");
                    }
                    reader.onload = function (e) {
                        console.log("成功读取....");

                        var imgstr='<img style="width:110px;height:110px;margin-left: 2px" src="'+e.target.result+'"/>';
						function duplicateRemoval(){    //去重定义函数
							for(var i=0;i<imgSrc.length;i++){
							    if(e.target.result == imgSrc[i]){
							        return true;
								}
							}
						};
						if(duplicateRemoval()){
							alert("不能重复提交图片！");
							return;
						};
                        imgSrc.push(e.target.result);   //把图片src存到数组里面
                        var oDelete = "<img onclick='odelete(this)' style='position: absolute;top: 0;right: 0;width: 1.5rem;height: 1.5rem' src='../../images/bizimg/delete.png'/>";       //创建图片右上角点击删除图片的按钮
                        var oimgbox=document.getElementById("imgboxid");    //页面中放图片的盒子
                        var ndiv=document.createElement("div");  //动态创建一个放图片的盒子

                        ndiv.innerHTML=imgstr + oDelete;
                        ndiv.className="img-div";
                        oimgbox.appendChild(ndiv);
						var num = oimgbox.children.length;  //已经存储到div里面图片的个数
						if(num >= 9){
							var oBtnBox = document.getElementById("btnBox");  //获取点击元素的盒子的div
                            oBtnBox.classList.remove("show");
                            oBtnBox.classList.add("hide");
						}
                    }

                    reader.readAsDataURL(file);
                }

            };
            function odelete(obj){         //点击删除图标删除上传的图片
				var parent = obj.parentNode.parentNode;  //获取包裹图片元素的大盒子
				var perentList = obj.parentNode;  //获取获取包裹图片元素创建的盒子
				for(var i=0;i<parent.children.length; i++){
                    perentList.setAttribute("index",i)
				};
				var num = perentList.attributes['index'].nodeValue;   //获取当前图片的索引值
//				alert(num);
                imgSrc.splice((num-1),1);   //删除元素得到新数组

                obj.parentNode.parentNode.removeChild(obj.parentNode);
                var oBtnBox = document.getElementById("btnBox");  //获取点击元素的盒子的div
                oBtnBox.classList.remove("hide");
                oBtnBox.classList.add("show");
            };

				//房产证/企业许可证
			function xmTanUploadImgf(obj) {

				var fl=obj.files.length;
				for(var i=0;i<fl;i++){
					var file=obj.files[i];
					var reader = new FileReader();

					//读取文件过程方法

					reader.onloadstart = function (e) {
						console.log("开始读取....");
					}
					reader.onprogress = function (e) {
						console.log("正在读取中....");
					}
					reader.onabort = function (e) {
						console.log("中断读取....");
					}
					reader.onerror = function (e) {
						console.log("读取异常....");
					}
					reader.onload = function (e) {
						console.log("成功读取....");

						var imgstr='<img style="width:110px;height:110px;margin-left: 2px" src="'+e.target.result+'"/>';
						var oimgbox=document.getElementById("imgboxidf");
						var ndiv=document.createElement("div");
                        var oImgBtn = document.getElementById("imgBtnf");   //点击的图片

						ndiv.innerHTML=imgstr;
						ndiv.className="img-div";
                        oimgbox.innerHTML = "";   //每次向图片盒子里面加内容时把图片盒子清空
						oimgbox.appendChild(ndiv);
                        oImgBtn.setAttribute("class", "hide");
					}

					reader.readAsDataURL(file);
			//alert(1);
				}

			};
			//仓库平面图
			function xmTanUploadImgc(obj) {

				var fl=obj.files.length;
				for(var i=0;i<fl;i++){
					var file=obj.files[i];
					var reader = new FileReader();

					//读取文件过程方法

					reader.onloadstart = function (e) {
						console.log("开始读取....");
					}
					reader.onprogress = function (e) {
						console.log("正在读取中....");
					}
					reader.onabort = function (e) {
						console.log("中断读取....");
					}
					reader.onerror = function (e) {
						console.log("读取异常....");
					}
					reader.onload = function (e) {
						console.log("成功读取....");

						var imgstr='<img style="width:110px;height:110px;margin-left: 2px;" src="'+e.target.result+'"/>';
						var oimgbox=document.getElementById("imgboxidc");
						var ndiv=document.createElement("div");
                        var oImgBtn = document.getElementById("imgBtnc");   //点击的图片

						ndiv.innerHTML=imgstr;
						ndiv.className="img-div";
                        oimgbox.innerHTML = "";   //每次向图片盒子里面加内容时把图片盒子清空
						oimgbox.appendChild(ndiv);
                        oImgBtn.setAttribute("class", "hide");
					}

					reader.readAsDataURL(file);
				}
			}
	</script>
</html>